<template>
	<view>
		<view class="item" v-for="(t,index) in dizhiArr">
			<view class="xuanze">
				<checkbox-group>
					<label>
						<van-checkbox @change="xuanzhong(index)" :value="checkitem[index]"></van-checkbox>
					</label>
				</checkbox-group>
			</view>



			<view class="zhongjian">

				<view class="zhongjiantop">
					{{t.receiver}} &nbsp; {{t.mobile}}
					<van-tag type="danger" round size="medium" v-if="index==0?true:false">默认</van-tag>
				</view>
				<view class="zhongjianbottom">
					{{t.province}}{{t.city}}{{t.area}}{{t.addr}}
				</view>


			</view>
			<view class="youce" @click="tiaozhuantianjia(index)">
				<van-icon name="edit" />
			</view>
		</view>

		<view class="tishi">
			以下地址超出配送范围
		</view>


		<view class="btn">
			<van-button type="danger" round block style="width: 100%;" @click="tiaozhuan"  >新增地址</van-button>
		</view>
	</view>
</template>

<script>
	import {
		getDizhi
	} from "../../../utils/goumai.js"
	import {getmorendizhi} from "../../../api/dizhiliebiao.js"
	export default {
		data() {
			return {
				checkitem: [],
				dizhiArr: [],
			};
		},
		onLoad() {

		},
		onShow() {
			this.GETDIZHI()
			this.xuanzhongmoren()
			this.$forceUpdate()
		},
		methods: {
			xuanzhong(index) {
				console.log("点击选中")
				this.checkitem[index] = !this.checkitem[index]
				this.GETmorendizhi(this.dizhiArr[index].addrId)
				this.GETDIZHI()
				//强制更新
				this.$forceUpdate()
			},
			async GETDIZHI() {
				let result = await getDizhi()
				this.dizhiArr = result.data.data
				console.log(this.dizhiArr, "this.dizhiArr")
			},
			xuanzhongmoren() {
				for (let i = 0; i < this.dizhiArr.length; i++) {
					this.checkitem[i]=false
				}
			},
			tiaozhuan(){
				uni.navigateTo({
					url:`/pages/tianjiadizhi/tianjiadizhi/tianjiadizhi?name=${''}`
				})
			},
			async GETmorendizhi (addrId){
				let result = await getmorendizhi(addrId)
				console.log(result,"result")
			},
			tiaozhuantianjia(index){
				uni.navigateTo({
					url:`/pages/tianjiadizhi/tianjiadizhi/tianjiadizhi?name=${this.dizhiArr[index].receiver}&tel=${this.dizhiArr[index].mobile}&sheng=${this.dizhiArr[index].province}&shi=${this.dizhiArr[index].city}&qu=${this.dizhiArr[index].area}&xiangxi=${this.dizhiArr[index].addr}&addrId=${this.dizhiArr[index].addrId}&commonAddr=${this.dizhiArr[index].commonAddr}`
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		margin-top: 50rpx;
		display: flex;

		.xuanze {
			width: 20%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.zhongjian {
			width: 80%;
			display: flex;
			flex-direction: column;
			.zhongjianbottom{
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

		}

		.youce {
			width: 20%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.tishi {
		margin-top: 50rpx;
		color: #808080;
		font-size: 35rpx;
		display: flex;
		justify-content: center;
	}

	.btn {
		margin-top: 150rpx;
	}
</style>